<template>

<!--  props作用指定属性可用使用 a b ref给这棵树起名唯一标记，在获取getCheckedKeys会用到
  node-key="id" 给树的节点起个唯一的名字

-->
  <div>
  <el-tree
    :data="menuTree" :props="defaultProps"
    show-checkbox
    ref="tree"
    node-key="menuId"
    :default-checked-keys="roleMenuIds"
  ></el-tree>
  <el-button @click="getCheckedKeys">保存权限</el-button>
  </div>
</template>

<script>
export default {
  name: "MenuTree",
    data(){
      return{
        menuTree:[],
        defaultProps:{
          label:"name",
          children:"children"
        },
        checkedMenuIds:[],
        roleMenuDto:{},//定义一个对象接收单个Id 和数组
        roleMenuIds:[]
      }
    },
        methods:{
          getCheckedKeys(){
            this.roleMenuDto.roleId=this.$route.query.roleId;
            this.checkedMenuIds=this.checkedMenuIds.concat(this.$refs.tree.getCheckedKeys()).concat(this.$refs.tree.getHalfCheckedKeys());
            this.roleMenuDto.menuIds=this.checkedMenuIds;
        // console.log(this.$refs.tree.getCheckedKeys());//获取ID
        //     console.log(this.$refs.tree.getHalfCheckedKeys());//获取半节点
          //发出axios请求
            console.log(this.roleMenuDto)
            this.axios.post("/roleResource/addRoleResource"
            ,this.roleMenuDto).then((resp)=>{
              this.$message.success("保存成功")
              this.$router.push("/role/selectAll")
            });
          }
        },
    created() {
    //生成整个权限树节点
    this.axios.get("/menu/sjd").then((resp)=>{
      this.menuTree=resp.data;
      //给树的默认权限赋值
      this.axios.get("/roleResource/selectDuiyqx/"+this.$route.query.roleId).then((resp)=>{
        this.roleMenuIds=resp.data.map((roleMenu)=>{return roleMenu.resourceId});
        console.log( this.roleMenuIds);
      //  类似java中的流输出
      });
    });

    }
}
</script>

<style scoped>

</style>
